<template>
	<view class="container">
		<view class="queryForm">
			<uni-forms ref="queryRef" :model="queryParams" label-width="70px" label-align="right">
				<uni-forms-item label="字典名称">
					<xy-select v-model="queryParams.dictType" :data="typeOptions" label-name="dictName"
						value-name="dictType" placeholder="请输入字典名称" />
				</uni-forms-item>
				<uni-forms-item label="字典标签">
					<uni-easyinput v-model="queryParams.dictLabel" placeholder="请输入字典标签" />
				</uni-forms-item>
				<uni-forms-item label="状态" name="status">
					<xy-select v-model="queryParams.status" :data="sys_normal_disable" placeholder="字典状态" clearable />
				</uni-forms-item>
				<uni-forms-item label="操作">
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="handleQuery()">搜索</button>
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="resetQuery()">重置</button>
					<button class="mini-btn xy-btn" type="default" size="mini" @click="handleAdd()"
						v-if="proxy.$auth.hasPermi('system:dict:add')">添加</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- @iconClick="iconClick" -->
		<view v-for="(item,index) in dataList" :key="index">
			<uni-card>
				<view class="uni-body">
					<view>
						<text>字典编码：</text>
						<text>{{ item.dictCode }}</text>
					</view>
					<view>
						<text>字典标签：</text>
						<text
							v-if="(item.listClass == '' || item.listClass == 'default') && (item.cssClass == '' || item.cssClass == null)">{{ item.dictLabel }}</text>
						<uni-tag v-else :type="item.listClass == 'primary' ? '' : item.listClass" :class="item.cssClass"
							:text="item.dictLabel" />
					</view>
					<view>
						<text>字典键值：</text>
						<text>{{ item.dictValue }}</text>
					</view>
					<view>
						<text>字典排序：</text>
						<text>{{ item.dictSort }}</text>
					</view>
					<view>
						<text>状态：</text>
						<dict-tag :options="sys_normal_disable" :value="item.status" />
					</view>
					<view>
						<text>创建时间：</text>
						<text>{{ item.createTime }}</text>
					</view>
					<view>
						<text>备注：</text>
						<text>{{ item.remark }}</text>
					</view>
				</view>
				<view slot="actions" class="card-actions">
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="handleUpdate(item)"
						v-if="proxy.$auth.hasPermi('system:dict:edit')">编辑</button>
					<button class="mini-btn xy-btn" type="warn" size="mini" @click="handleDelete(item)"
						v-if="proxy.$auth.hasPermi('system:dict:remove')">删除</button>
				</view>
			</uni-card>
		</view>
		<uni-load-more :status="xlstatus" />
	</view>
</template>

<script setup>
	import { optionselect as getDictOptionselect } from "@/pages_work/api/system/dict/type";
	import { getType } from "@/pages_work/api/system/dict/type";
	import { listData, getData, delData, addData, updateData } from "@/pages_work/api/system/dict/data";
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance();
	const {
		sys_normal_disable
	} = proxy.useDict("sys_normal_disable");

	onLoad((params) => {
		uni.setNavigationBarTitle({
			title: params.title
		});
		if (params.dictId == undefined || params.dictId == null || params.dictId == '') {} else {
			getTypes(params.dictId);
			getTypeList();
		}
	})

	/** 查询字典列表所需的参数 */
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
	});
	/** 总数 */
	const total = ref(0);
	/** 字典列表 */
	const dataList = ref([]);
	const typeOptions = ref([]);
	const defaultDictType = ref("");
	/** 下拉状态 */
	const xlstatus = ref('more');

	/** 查询字典类型详细 */
	function getTypes(dictId) {
		getType(dictId).then(response => {
			queryParams.value.dictType = response.data.dictType;
			defaultDictType.value = response.data.dictType;
			getList();
		});
	}

	/** 查询字典类型列表 */
	function getTypeList() {
		getDictOptionselect().then(response => {
			typeOptions.value = response.data;
		});
	}

	/** 查询字典数据列表 */
	const getList = () => {
		listData(queryParams.value).then(res => {
			dataList.value = dataList.value.concat(res.rows);
			total.value = res.total;

			if (res.total == undefined) {
				// 标记加载数据完成
				xlstatus.value = 'more';
			} else if (res.total <= dataList.value.length) {
				// 标记加载数据完成
				xlstatus.value = 'noMore';
			} else {
				// 标记还有剩余数据
				xlstatus.value = 'more';
			}
		})
	}

	/** 搜索按钮操作 */
	function handleQuery() {
		xlstatus.value = 'more';
		queryParams.value.pageNum = 1;
		dataList.value = [];
		getList();
	};

	/** 重置按钮操作 */
	function resetQuery() {
		// dateRange.value = [];
		proxy.resetForm("queryRef");
		queryParams.value = {
			pageNum: 1,
			pageSize: 10,
		};
		handleQuery();
	};

	/** 添加字典信息 */
	const handleAdd = () => {
		uni.$once('update', function(){
			handleQuery()
		})
		proxy.$tab.navigateTo("form?title=添加字典&dictCode=" + "&dictType=" + queryParams.value.dictType);
	}

	/** 编辑字典信息 */
	const handleUpdate = (row) => {
		uni.$once('update', function(){
			handleQuery()
		})
		proxy.$tab.navigateTo("form?title=编辑字典&dictCode=" + row.dictCode + "&dictType=" + queryParams.value.dictType);
	}

	/** 删除按钮操作 */
	const handleDelete = (row) => {
		const ids = row.dictCode;
		proxy.$modal.confirm('是否确认删除字典编码为"' + ids + '"的数据项？').then(function() {
			return delType(ids);
		}).then(() => {
			useDictStore().removeDict(queryParams.value.dictType);
			handleQuery();
			proxy.$modal.msgSuccess("删除成功");
		}).catch(() => {});
	};

	/** 生命周期函数--下拉刷新 */
	onPullDownRefresh(() => {
		handleQuery()
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000)
	})

	/** 生命周期函数-上拉加载 */
	onReachBottom(() => {
		if (xlstatus.value == 'noMore' || xlstatus.value == 'loading') {
			// 如果没有更多数据或者正在加载数据，则不需要加载更多，直接返回
			return;
		}
		// 标记正在加载数据
		xlstatus.value = 'loading';
		queryParams.value.pageNum++;
		getList();
	})
	
</script>

<style lang="scss">
	@import "@/static/scss/work/index.scss";
</style>